<template>
    <div>
        <view class="box-bg">
            <uni-nav-bar shadow :fixed="true" background-color="rgba(255, 222, 173, 0.3)">
                <block v-slot:left>
                    <view class="city" @tap="escOne()">
                        <uni-icons type="left" color="#666" size="18" />
                    </view>
                </block>
                <view class="input-view">
                    <uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
                    <input confirm-type="search" v-model="data.key" class="nav-bar-input" type="text"
                        placeholder="输入搜索关键词" />
                </view>
                <block v-slot:right>
                    <view class="city" @tap="SearchClick()">
                        搜索
                    </view>
                </block>
            </uni-nav-bar>
        </view>
        <view v-for="(item, index) in data.good_date" style="margin-bottom: 20px;">
            <uni-card @click="onClick(item.g_id)" style="display: flex;width: 88%;">
                <img slot='cover' style="width: 300rpx; height: 300rpx;" :src="item.g_img[0] ? item.g_img[0].url : ''">
                <view
                    style="width: 60%; padding: 20rpx; display: flex;flex-direction: column;justify-content: space-between;">
                    <view>{{ item.g_name }}</view>
                    <view style="width: 80%;
                    text-overflow: -o-ellipsis-lastline;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    line-clamp: 2;
                    -webkit-box-orient: vertical;
                    ">{{ item.g_info }}</view>
                    <view>
                        <text style="color: red; margin-right: 20rpx;">￥{{ item.g_price }}</text>
                        <text>剩余库存:{{ item.g_count }}</text>
                    </view>
                </view>
            </uni-card>
        </view>

        <uni-load-more :status="data.status" :content-text="data.contentText" />

    </div>
</template>
<script lang='ts' setup>
import { reactive, ref } from 'vue'
import { onLoad, onReachBottom } from "@dcloudio/uni-app"
import { goodsssListApi } from '../../https/http'

const city = ref('北京')

const data = reactive<{
    key: string | null
    good_date: any
    status: string
    count:number
    currentPage:number,
    pagesize:number,
    contentText: {},
}>({
    key: "",
    count:0,
    currentPage:1,
    pagesize:10,
    good_date: [],
    status: "more", //more	加载前  loading	加载中  no-more 没有更多数据
    contentText: {
        contentdown: '查看更多',
        contentrefresh: '加载中',
        contentnomore: '没有更多'
    },
})
onLoad((e: any) => {
    data.key = e.key
    data.good_date = []
    data.status = "more"
    data.currentPage = 1
    data.pagesize = 10
    newData()
})

onReachBottom(async() => {
    if (data.status == "more") {
        data.currentPage = data.currentPage + 1
        await newData()
    }
})
const newData = async () => {
    let key = ""
    if(!data.key){
        key = "null"
    }else{
        key = data.key
    }
    const res = await goodsssListApi(data.currentPage, data.pagesize,key)
    if (res.code == 200) {
        res.data.forEach(e => {
            if (e.g_img) {
                e.g_img = JSON.parse((e.g_img as any));
            }
            data.good_date.push(e)
        })
    }
    if (data.good_date.length >= (res.count as any)){
        data.status = "no-more"
    }else{
        data.status = "more"
    }

}
const onClick = (id:number) => {
    uni.navigateTo({
    url: `/pages/detail/detail?g_id=${id}`
  });
}
const SearchClick = () => {
    data.good_date = []
    data.status = "more"
    data.currentPage = 1
    data.pagesize = 10
    newData()
}
const escOne = () => {
    uni.navigateBack({
        delta: 1
    });
}

</script>


<style lang="scss" scoped>
$nav-height: 30px;

::v-deep.uni-card__content {
    display: flex;
}

.box-bg {
    background-color: #F5F5F5;
}

.city {
    /* #ifndef APP-PLUS-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    // width: 160rpx;
    margin-left: 4px;
}

.input-view {
    /* #ifndef APP-PLUS-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    // width: 500rpx;
    flex: 1;
    background-color: #f8f8f8;
    height: $nav-height;
    border-radius: 15px;
    padding: 0 15px;
    flex-wrap: nowrap;
    margin: 7px 0;
    line-height: $nav-height;
}

.input-uni-icon {
    line-height: $nav-height;
}

.nav-bar-input {
    height: $nav-height;
    line-height: $nav-height;
    /* #ifdef APP-PLUS-NVUE */
    width: 370rpx;
    /* #endif */
    padding: 0 5px;
    font-size: 12px;
    background-color: #f8f8f8;
}
</style>